<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>TS两数相加</title> 
		<link rel="stylesheet" href="./css/style.css">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<div class="container">
			<header>两数相加求和</header>
			<div class="inputField">
				<input id="num1" type="text" placeholder="请在这里输入第一个数">
			</div>
			<div class="inputField">
				<input id="num2" type="text" placeholder="请在这里输入第二个数">
				<button id="add"><i class="fa fa-plus"></i></button>
			</div>
			<ul class="todoList">
				
			 </ul>
			<div class="footer">
				<span></span>
				<button>清空</button>
			</div>
		</div>
	</body>
	<script>
		const btn = document.getElementById("add");
		const num1 = document.getElementById("num1");
		const num2 = document.getElementById("num2");
		// 结果列表
		const result = document.querySelector(".todoList")
		// 求和函数
		const add = (num1, num2) => num1.value + num2.value;
		// 加号按钮绑定事件
		btn.onclick = () => result.innerHTML += `<li>${add(num1, num2)}<span><i class="fa fa-trash"></i></span></li>`

		
	</script>
</html>
